<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>登录页面</title> 
    <style>
        body {  
            height: 100vh;  
            background-color: #f0f0f0;  
            background-image: url('/static/images/sb1.jpg');
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }  
        
        .login-container {  
            position: absolute;
            top:25%;
            left:50%;
            margin-left:-170px;
            background-color: #fff;  
            padding: 20px;  
            border-radius: 8px;  
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
            width: 300px;  
            text-align: center;  
        }  
        
        .form-group {  
            margin-bottom: 15px;  
        }  
        
        .form-group label {  
            /* display: block;   */
            margin-bottom: 5px;  
        }  
        
        .form-group input {  
            /* width: 100%;   */
            padding: 10px;  
            border: 1px solid #ccc;  
            border-radius: 4px;  
        }  
        
        button {  
            width: 65%; 
            margin: 0px auto; 
            padding: 10px;  
            background-color: #007bff;  
            color: white;  
            border: none;  
            border-radius: 4px;  
            cursor: pointer;  
        }  
        
        button:hover {  
            background-color: #0056b3;  
        }
    </style>
</head>  
<body>  
    <div class="login-container">  
        <h2>登录</h2>  
        <form id="loginForm" method="post" action="/mobile/login">  
            <div class="form-group">  
                <label for="username">账号:</label>  
                <input type="text" id="username" name="username" required>  
            </div>  
            <div class="form-group">  
                <label for="password">密码:</label>  
                <input type="password" id="password" name="password" required>  
            </div>  
            <button type="submit">登录</button>  
        </form>  
    </div>  
    <!-- 可选：添加JavaScript进行表单验证 -->
</body>  
<script>
    var error = '{$error}';
    message();
    function message(){
        if (error != '')
            return alert(error);
    }
    document.getElementById('loginForm').addEventListener('submit', function(event) {  
        // 简单的表单验证  
        const username = document.getElementById('username').value;  
        const password = document.getElementById('password').value;  
        if (username.trim() === '' || password.trim() === '') {  
            event.preventDefault(); // 阻止表单默认提交行为  
            return alert('账号和密码不能为空！');    
        }
        // 示例中仅打印到控制台
        console.log('账号:', username, '密码:', password);  
        event.submitter;
    });
</script>
</html>